<script setup lang="ts">
import type { AppPosition } from '@/types';

import {
  type PropType,
} from 'vue';

import {
  ElButton,
  ElButtonGroup
} from 'element-plus';

import { Horizontal } from '@/components/core/resize-layout';

defineOptions({
  name: 'WorkDemo',
});
const { nowRect } = defineProps({
  nowRect: {
    default: () => ({}),
    type: Object as PropType<AppPosition>,
  },
});
const emits = defineEmits(['api']);

const windowMaxSize = () => {
  emits("api", {
    event: "windowMaxSize",
  });
}
const windowNormalSize = () => {
  emits("api", {
    event: "windowNormalSize",
  });
}
const windowMinSize = () => {
  emits("api", {
    event: "windowMinSize",
  });
}
const windowFullSize = () => {
  emits("api", {
    event: "windowFullSize",
  });
}
const windowClose = () => {
  emits("api", {
    event: "windowClose",
  });
}
const openApp = () => {
  emits("api", {
    event: "openApp",
    app: "system_about",
  });
}
const closeApp = () => {
  emits("api", {
    event: "closeApp",
    app: "system_about",
  });
}
const setWindowTitle = () => {
  emits("api", {
    event: "setWindowTitle",
    title: new Date().valueOf(),
  });
}
const openAppWithData = () => {
  emits("api", {
    event: "openApp",
    app: "demo_colorfull",
    data: "我是传入的参数",
  });
}

</script>

<template>
  <div class="wos-demo">
    <Horizontal :default-width="320" :max-width="480" :min-width="320" :now-rect="nowRect">
      <template #aside>
        <div class="side-left">
          <div class="toolbar">
            <ElButtonGroup>
              <ElButton size="small">
                打开
              </ElButton>
              <ElButton size="small">
                新增
              </ElButton>
              <ElButton size="small">
                删除
              </ElButton>
            </ElButtonGroup>
          </div>
          <div class="content">
            <p class="p-4">左侧菜单</p>
          </div>
        </div>
      </template>
      <template #main>
        <div class="content-right">
          <div class="flex flex-wrap items-center gap-6">
          <ElButton type="primary" class="w-[120px]" @click="windowMaxSize">
            窗口最大化
          </ElButton>
          <br />
          <ElButton type="primary" class="w-[120px]" @click="windowNormalSize">
            普通窗口
          </ElButton>
          <br />
          <ElButton type="primary" class="w-[120px]" @click="windowMinSize">
            窗口最小化
          </ElButton>
          <br />
          <ElButton type="primary" class="w-[120px]" @click="windowClose">
            关闭当前窗口
          </ElButton>
          <br />
          <ElButton type="primary" class="w-[120px]" @click="windowFullSize">
            窗口全屏
          </ElButton>
          <br />
          <ElButton type="primary" class="w-[120px]" @click="openApp">
            打开某app
          </ElButton>
          <br />
          <ElButton type="primary" class="w-[120px]" @click="closeApp">
            关闭某app
          </ElButton>
          <br />
          <ElButton type="primary" class="w-[120px]" @click="setWindowTitle">
            修改窗口标题
          </ElButton>
          <br />
          <ElButton type="primary" class="w-[120px]" @click="openAppWithData">
            带参打开App
          </ElButton>
          </div>
        </div>
      </template>
    </Horizontal>
  </div>
</template>

<style lang="scss">
@import url('./css/demo.scss');
</style>
